<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>产 品 管 理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/resource/layui/css/layui.css"
	media="all">
<script type="text/javascript"
	src="<%=request.getContextPath()%>/resource/js/jquery-3.6.0.min.js"></script>

</head>
<body>
		<div class="layui-form">
    		<div class="layui-input-inline">
      			<select name="searchType" lay-filter="searchType" id="searchType">
        			<option value="productId">产品编号</option>
        			<option value="productName">产品名称</option>
        			<option value="productType">产品种类</option>
      			</select>
    		</div>

			<div class="layui-inline">
    			<input class="layui-input" name="searchValue" id="searchReload" autocomplete="off">
  			</div>

			<button class="layui-btn" data-type="reload" id="searchButton">搜索</button>
  		</div>

	<table class="layui-hide" id="productListTable" lay-filter="wholeTable"></table>
	

	<script type="text/html" id="firstTool">
  		<div class="layui-btn-container">
    		<button class="layui-btn layui-btn-primary layui-border-green layui-btn-sm" lay-event="add">新增<i class="layui-icon layui-icon-add-1"></i></button>
			<button class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" lay-event="edit">编辑<i class="layui-icon layui-icon-edit"></i></button>
    		<button class="layui-btn layui-btn-primary layui-border-red layui-btn-sm" lay-event="delete">批量删除<i class="layui-icon layui-icon-delete"></i></button>
			<button class="layui-btn layui-btn-primary layui-border-black layui-btn-sm" lay-event="refresh">刷新<i class="layui-icon layui-icon-refresh-3"></i></button>
  		</div>
	</script>

	<script src="<%=request.getContextPath()%>/resource/layui/layui.js"
		charset="utf-8"></script>


	<script>
		layui.use(['table','util','layer'], function() {
			var table = layui.table;
			var util = layui.util;
			var layer = layui.layer;

			table.render({
				elem : '#productListTable',
				url : 'lists',
				toolbar : '#firstTool' //开启头部工具栏，并为其绑定左侧模板
				,
				id : 'tableReload',
				defaultToolbar : ['filter', 'exports', 'print'],
				title : '订单列表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'productId',
					title : '产品编号',
					unresize : true,
					sort : true
				}, {
					field : 'productName',
					title : '产品名称'
				}, {
					field : 'productType',
					title : '产品种类',
				}, {
					field : 'status',
					title : '状态',
					sort : true,
					templet : '#status'
				}, {
					field : 'productIntroduction',
					title : '产品介绍',
				}, {
					field : 'relatedPictures',
					title : '相关图片'
				} ] ],
				page : true
			});
			
			//重新加载
			var $ = layui.$, active = {
					reload : function() {
						var searchReload = $('#searchReload');
						var searchType = $('#searchType');
						//执行重载
						table.reload('tableReload', {
							page : {
								curr : 1
							//重新从第 1 页开始
							},
							where : {
								searchType : searchType.val(),
								searchValue : searchReload.val()
							}
						});
					}
				};
			
			$('#searchButton').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			//头工具栏事件
			table.on('toolbar(wholeTable)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				var data = checkStatus.data;
				switch (obj.event) {	
				case 'add':
					layer.open({
						  type: 2, 
						  content: 'add',
						  skin: 'layui-layer-molv',
						  area: ['600px', '600px']
						}); 
					break;
				case 'edit':
					if(data.length > 1){
						layer.msg('只能选择一个数据进行修改',{
							icon : 2,
							time : 2000
						});
						return false;
					} else if(data.length == 0){
						layer.msg('请选择一个数据进行修改',{
							icon : 2,
							time : 2000
						});
						return false;
					}
					var productId = data[0].productId;
					layer.open({
						  type: 2, 
						  content: 'update?productId='+productId,
						  skin: 'layui-layer-molv',
						  area: ['600px', '600px'],
						}); 
					break;
				case 'delete':
					if(data.length == 0){
						layer.msg('请选择数据进行删除',{
							icon : 2,
							time : 2000
						});
						return false;
					}
					var productIds = [];
					for(var i=0 ; i < data.length ; i++){
						productIds.push(data[i].productId);
					}
					$.post("deleteAll?productIds="+productIds,function(obj){
						if (obj.result == 1) {
							layer.msg(obj.msg, {
								icon : 1,
								time : 2000
							},function(){
								location.reload();
							});
							return false;
						} else {
							layer.msg(obj.msg, {
								icon : 2,
								time : 2000
							});
							return false;
						}
					});
					return false;
					break;
					
				case 'refresh':
					location.reload();
					break;
				}
				;
			});

		});
	</script>
	
	<script type="text/html" id="status">
  			{{#  if(d.status == "有效产品"){ }}
    			<span style="color: #00BFFF;">有效产品</span>
  			{{#  } else { }}
    			<span style="color: #F581B1;">停产</span>
  			{{#  } }}
	</script>
	
</body>
</html>